<template>
  <div class="app-container">
    <div class="app-container-table-border">
      <div class="cd-text-xxlg text-center cd-mb8">
        <span>甲供材料款支付情况统计表</span>
        <el-button v-if="dataList.length > 0" class="top-right-btn" type="warning" plain icon="el-icon-download"
          size="mini" @click="handleExport">
          导出
        </el-button>
      </div>
      <el-table :span-method="objectSpanMethod" :summary-method="getSummaries" show-summary class="report-table" border
        stripe :data="dataList" :max-height="tableHeight">
        <el-table-column prop="gysName" header-align="center" label="供应商" min-width="140" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.gysName }}{{ scope.row.type ? '(' + scope.row.type + ')' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期数" align="center" min-width="80" property="qhName" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.qhName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" align="center" label="供货周期" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.date || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" align="center" label="材料类别" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.type || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in titleList" :key="index" align="center" :label="item.bdName">
          <el-table-column v-for="(sItem, sIndex) in item.zdList" :key="sIndex" header-align="center" align="right"
            :prop="sItem.zdVal" :label="sItem.zdName" min-width="140" show-overflow-tooltip>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getReportFormPaymentStatistics } from "@/api/ma/paymentSituation";
import decimal from "@/utils/big-decimal";

export default {
  name: "BillingDetail",
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      titleList: [],
      // table数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        bdId: undefined,
        zdId: undefined
      },
      dayTableTotal: {},
      fpList: [],
      //合并表格
      columnArr: ["vuhao"],
      spanData: [],
      tableHeight: document.documentElement.scrollHeight - 170
    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["sysProjectId", "sysProjectList"])
  },
  watch: {
    sysProjectId (newVal, oldVal) {
      // 系统顶部选中项目变化
      this.getList();
    },
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      this.loading = true;
      getReportFormPaymentStatistics({ projectId: this.sysProjectId }).then((res) => {
        const { list, header, total } = res.data;
        this.dataList = list || [];
        this.titleList = header || [];
        if (this.dataList.length > 0) {
          this.getSpanData(this.dataList);
        }
        this.dayTableTotal = res.data.total || {}; //总计
        this.loading = false;
      });
    },

    // 计算需要合并的单元格
    getSpanData (data) {
      const columns1 = ["vuhao", "sheetTypeName", "initZongjiaSum", "ljkfje"]; // 需要合并的列名
      let columns2 = [];
      if (this.titleList.length > 0) {
        this.titleList.forEach(item => {
          columns2.push(item.bqzfje);
        });
      }
      this.columnArr = [...columns1, ...columns2];
      if (!data || data.length === 0 || !this.columnArr || this.columnArr.length === 0) {
        return;
      }
      this.spanData = [];
      for (let i = 0; i < this.columnArr.length; i++) {
        let contactDot = 0;
        const spanArr = [];
        data.forEach((item, index) => {
          // console.log(item)
          if (index === 0) {
            spanArr.push(1);
          } else {
            const isMergeRow = this.isMerge(data[index - 1], item, i);
            if (isMergeRow) {
              spanArr[contactDot] += 1;
              spanArr.push(0);
            } else {
              contactDot = index;
              spanArr.push(1);
            }
          }
        });
        this.spanData.push(spanArr);
      }

      // console.log(this.spanData);
    },
    // 是否合并
    isMerge (prevItem, item, index) {
      let ret = true;
      // for (let i = 0; i <= index; i++) {
      const element = this.columnArr[index];
      if (item[element] != prevItem[element]) {
        ret = false;
        // break;
      }
      // }
      return ret;
    },
    // 合并单元格
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.columnArr.includes(column.property)) {
        const index = this.columnArr.findIndex((item) => {
          return item == column.property;
        });
        if (this.spanData[index]) {
          if (this.spanData[index][rowIndex]) {
            return {
              rowspan: this.spanData[index][rowIndex],
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
    // 拼接合计
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        }
        // if (column.property == 'initRongliang') {
        //   sums[index] = this.dayTableTotal?.rongliangTotal || "-";
        // } else if (column.property == 'initZongjiaSum') {
        //   sums[index] = this.dayTableTotal?.zongjiaTotal || "-";
        // } else if (column.property == 'ljkfje') {
        //   sums[index] = this.dayTableTotal?.ljkfje || "-";
        // }
        let arr = [];
        if (this.titleList.length > 0) {
          this.titleList.forEach(item => {
            arr.push(item.bqzfje);
            arr.push(item.kpje);
          });
        }
        if (arr.length > 0) {
          arr.forEach(title => {
            if (column.property == title) {
              sums[index] = this.dayTableTotal[title] || "-";
            }
          });
        }
      });
      return sums;
    },

    // 汉字转换
    periodsManage (index) {
      const arr = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',];
      return arr[index];
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download(
        "cm/baContractSheets/getReportFormPaymentStatisticsExport",
        {
          ...this.queryParams
        },
        `开票明细_${new Date().getTime()}.xlsx`
      );
    }
  }
};
</script>
<style lang="scss" scoped></style>